<template>
  <!-- 页头 -->
  <van-nav-bar title="我的券订单" class="nav-var-header" fixed left-arrow @click-left="() => {router.go(-1)}"/>

  <van-list class="list">
    <van-cell v-for="item in order_list">
      <div class="card-box">
        <div class="card-img">
          <van-image :src="Bank"/>
        </div>
        <div class="order-con">
          <div class="order-header"
               @click="() => { router.push({path: '/actResult', query: { order_no: item.order_no }}) }">
            <div class="header-l">
              <p class="t">{{ item.sku_name }}</p>
              <p>{{ item.sku_title }}</p>
            </div>
            <div class="header-r">
              <p class="state" :class="item.state_info.color === 1 ?'color':''">{{ item.state_info.state_desc }}</p>
            </div>
          </div>
          <div class="border mt15 mb15"></div>
          <div class="order-content">
            <div class="order-content-l">
              <p>订单号：{{ item.order_no }}</p>
              <p>兑换时间: {{ item.obtain_time }}</p>
            </div>
            <div class="order-content-r">
              <van-button class="order-content-btn" size="small" type="danger"
                          @click="() => { router.push({path: '/actResult', query: { order_no: item.order_no }}) }">查看订单
              </van-button>
              <van-button class="order-content-btn bt" size="small" type="default"
                          @click="() => { router.push({path: '/actDetail', query: { sku_id: item.sku_id }}) }">商品详情
              </van-button>
            </div>
          </div>
        </div>
      </div>
    </van-cell>
  </van-list>

  <div class="foot">
    <div>仅展示近12个月的订单</div>
    <div>客服热线：400-8808-248</div>
  </div>

</template>
<script setup>
import Bank from "@/assets/image/bank.png";
import {useRouter} from 'vue-router'
import UseState from "@/store/useState.js";
import {bocOrderList} from "@/api/index.js";
import {computed, onMounted, ref} from "vue";
import {showFailToast} from "vant";

const router = useRouter()
const stateInfo = UseState()
const data = ref({})

onMounted(() => {
  getOrderList();
})

const order_list = ref();

const getOrderList = () => {
  bocOrderList().then(res => {
    if (res.code !== 0) {
      showFailToast(res.msg)
    } else {
      for (let i = 0; i < res.data.length; i++) {
        res.data[i]['state_info'] = stateInfo.handleState(res.data[i])
      }
      order_list.value = res.data
      console.log(order_list.value);
    }
  })
};

</script>

<style lang="scss" scoped>
.list {
  width: 100%;
  margin-top: 100px;
  padding: 20px 20px 0;
  text-align: left;
  box-sizing: border-box;

  .van-cell {
    margin-bottom: 20px;
    border-radius: 20px;
    padding: 30px 30px 30px 20px;
  }

  .border {
    width: 100%;
    border: 2px dashed #e5e5e5;
  }

  .card-box {
    display: flex;
    align-items: center;

    .card-img {
      flex: 0 0 156px;
      width: 156px;
      height: 233px;
    }

    .order-con {
      flex: auto;
      padding-left: 20px;
    }

    .order-header {
      display: flex;
      justify-content: space-between;

      p {
        text-align: left;
        font-size: 26px;
        color: #999999;
        line-height: 1.6em;
        font-weight: 500;
        white-space: nowrap;
        text-overflow: ellipsis; /* 显示省略号 */
      }

      .header-l {
        flex: 0 0 360px;
        width: 360px;

        p {
          font-size: 24px;
          color: #333333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }

        .t {
          color: #333333;
          font-size: 28px;
          font-weight: bold;
        }
      }

      .header-r {
        flex: auto;

        p {
          text-align: right;
        }

        .state {
          color: #d42402;
          font-weight: bold;
        }

        .color {
          color: #999999 !important;
        }

        .state.fail {
          color: #999999;
        }
      }
    }

    .order-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      p {
        text-align: left;
        font-weight: 500;
        color: #999999;
        line-height: 1.8em;
        font-size: 24px;
        /*让长段文本不换行*/
        white-space: nowrap;
        /*设置文本超出元素宽度部分隐藏*/
        overflow-x: hidden;
        /*设置文本超出部分用省略号显示*/
        text-overflow: ellipsis;
      }

      .order-content-l {
        flex: 0 0 320px;
        width: 320px;
      }

      .order-content-r {
        flex: auto;

        .order-content-btn{
          width: 158px;
        }

        .bt {
          margin-top: 20px;
          border: 1px solid #d42402;
          color: #d42402;
        }
      }
    }
  }
}

.foot {
  color: #666666;
  font-size: 28px;
  letter-spacing: .1rem;
  line-height: 1.6em;
  padding: 37px 0;
}

//.van-cell__value {
//  text-align: left;
//  color: #333;
//}


</style>
